
<template>
  <Account>
    <template v-slot:header>
      <NavBar :title="currentCoin.name" />
    </template>
    <div class="deposit">
      <!-- 头部 -->
      <div class="pc-box">
        <div class="l-f">
          <div class="nav-back l-f" @click="onBack">
            <img
              class="nav-back_icon"
              src="@/assets/icons/icon-left.svg"
              alt=""
            />
            <p class="nav-back_label">{{ $t("back") }}</p>
          </div>
        </div>
      </div>
      <div class="h5-box">
        <div class="deposit_more l-f l-row-sb" @click="onHistory">
          <div class="deposit_more_left l-f">
            <div class="deposit_more_left_icon l-f l-row-c">
              <img
                class="deposit_more_left_icon_img"
                src="@/assets/icons/icon-transaction.svg"
              />
            </div>
            <div class="deposit_more_left_info">
              <p class="deposit_more_left_info_title">
                {{ $t("account.transactionDetails") }}
              </p>
              <p class="deposit_more_left_info_desc">
                {{ $t("account.viewYourHistory") }}
              </p>
            </div>
          </div>
          <img class="deposit_more_right" src="@/assets/icons/icon-right.svg" />
        </div>
      </div>
      <div class="deposit_head l-f l-row-sb">
        <div class="pc-box">
          <div class="l-f">
            <img
              class="deposit_head_icon"
              src="@/assets/icons/icon-select_green.svg"
              alt=""
            />
            <div class="l-f deposit_head_info">
              <img class="deposit_head_info_icon" :src="currentCoin.icon" />
              <div>
                <p class="deposit_head_info_label">{{ currentCoin.label }}</p>
                <p class="deposit_head_info_name">{{ currentCoin.name }}</p>
              </div>
            </div>
          </div>
        </div>
        <div class="l-f">
          <a-radio :checked="true"></a-radio>
          <p class="deposit_head_name">{{ currentCoin.name }}</p>
        </div>
      </div>
      <div class="deposit_content">
        <div class="deposit_content_code l-f l-column l-row-c">
          <div class="deposit_content_code_box">
            <div ref="codeRef"></div>
          </div>
          <div class="deposit_content_code_exchange l-f">
            <img
              class="deposit_content_code_exchange_icon"
              src="@/assets/icons/icon-cut.svg"
            />
            <p class="deposit_content_code_exchange_label">
              1{{ currentCoin.name }} = {{convertExchange == 0 ? $t('account.spotExchangeRate') : '$' + convertExchange}}
            </p>
          </div>
        </div>
        <p class="deposit_content_desc">{{ $t("account.depositDesc") }}</p>
        <div class="deposit_content_address l-f">
          <p class="deposit_content_address_value l-f1 l-line1">
            {{ currentCoin.address }}
          </p>
          <div @click="onCopy" class="deposit_content_address_right l-f">
            <img
              class="deposit_content_address_right_icon"
              src="@/assets/icons/icon-copy.svg"
              alt=""
            />
            <span class="deposit_content_address_right_label">{{
              $t("account.copy")
            }}</span>
          </div>
        </div>
      </div>
      <a-button @click="onNext" class="deposit_btn" type="primary">{{
        $t("account.nextStep")
      }}</a-button>
    </div>
  </Account>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import QRCode from "qrcodejs2-fix";
import { message } from "ant-design-vue";
import { useI18n } from "vue-i18n";
import { useMainStore } from "@/store";

import Account from "@/views/account/index.vue";
import NavBar from "@/components/navBar/index.vue";

const route = useRoute();
const router = useRouter();
const { t } = useI18n();
const mainStore = useMainStore();

const codeRef = ref(null);

const currentCoin = reactive({
  id: 0,
  icon: "",
  label: "",
  name: "",
  address: "",
});
// 汇率计算
const convertExchange = computed(() => {
  switch (currentCoin.name) {
    case "BTC": return mainStore.btcClose
    case "ETH": return mainStore.ethClose
    default: return 1
  }
});

onMounted(() => {
  let query = route.query;
  currentCoin.id = query.id;
  currentCoin.icon = query.icon;
  currentCoin.label = query.label;
  currentCoin.name = query.name;
  currentCoin.address = query.address;

  new QRCode(codeRef.value, {
    text: currentCoin.address, // 需要转换为二维码的内容
    width: 150, //宽度
    height: 150, //高度
    colorDark: "#000000", //二维码方块颜色
    colorLight: "#ffffff", //背景颜色
    correctLevel: QRCode.CorrectLevel.Q, //容错率：L M Q H 依次递减
  });
});

const onBack = () => {
  router.back();
};

const onCopy = async () => {
  await navigator.clipboard.writeText("http://www.baidu.com");
  message.success(t("account.copyAddressSuccess"));
};

const onNext = () => {
  router.push({ name: "proof", query: currentCoin });
};

const onHistory = () => {
  router.push({ name: 'record', params: { index: 3}})
}
</script>

<style lang="scss" scoped>
@import url("./index.scss");
</style>